<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>响应式计算器</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/pop.css">
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/flexible.js"></script>
    <script src="js/pop.js"></script>
</head>
<body>
<div class="index">
    <input type="text" class="input01" id="" placeholder="请输入测量值">
    <div class="remove2">
        是否除2
        <div class="remove-li yes">
            <span class="reYes">YES</span>
            <i></i>
            <input type="text" class="hidden input02" value="YES">
        </div>
    </div>
    <div class="remove3">
        <input type="text" class="input03" value="37.49">
    </div>
    <div class="remove4"></div>
    <button type="button" class="remove-btn">确定</button>
</div>
<script>
    $(".remove-li").on('click',function () {
        if($(this).hasClass('yes')){
            $(this).children('i').animate({'left':"0.1rem"},500);
            $(this).children("span").animate({'opacity':"0"},250);
            $("span").animate({'padding-left':"0.6rem"},250);
            setTimeout(function () {
                $("span").animate({'opacity':"1"},250);
                $("span").html("NO");
            },1);
            $(this).removeClass("yes");
            $(this).addClass("no");
        }else {
            $(this).removeClass("no");
            $(this).addClass("yes");
            $(this).children("span").animate({'opacity':"0"},250);
            $("span").animate({'padding-left':"0.3rem"},250);
            setTimeout(function () {
                $("span").animate({'opacity':"1"},250);
                $("span").html("YES");

            },1);
            $(this).children('i').animate({'left':"0.8rem"},500);
        }
        setTimeout(function () {
            $(".input02").val($("span").html());
            console.log($(".input02").val());
        },500)
    });
    $(".remove-btn").on('click',function () {
        var result='';
        var in01 =  $(".input01");
        var in01Dom = in01.val();
        var in02 = $(".input02");
        var in02Dom = in02.val();
        var in03 = $(".input03");
        var in03Dom = in03.val();
        if(!in01Dom){
            Massage(2,"请输入测量值！",1000);
        }

        if(in02Dom == "YES"){
            result = (in01Dom/2)/in03Dom;
        }else if(in02Dom == 'NO'){
            result = in01Dom/in03Dom;
        }

        $(".remove4").html(result);
    })
</script>

</body>
</html>